<!--
 * @作者: kerwin
 * @公众号: 大前端私房菜
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            background:yellow;
            /*
            单行文本溢出显示省略号需要同时设置以下声明
            1. 容器宽度 width: 200px;
            2. 强制文本在一行内显示 white-space: nowrap;
            3. 溢出内容为隐藏 overflow: hidden;
            4. 溢出文本显示省略号 text-overflow: ellipsis;
            */
            width: 200px;
            height: 200px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    </style>
</head>
<body>
    
    <div>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum, ipsum. Voluptate iure blanditiis impedit alias dicta asperiores? Libero minus autem obcaecati reiciendis optio ratione expedita deserunt, suscipit corrupti quis dolores?
    </div>

    <pre>
        预格式化文本-保留空格, tab,回车
        div{
            background:yellow;
            width: 200px;
            height: 200px;
            white-space: nowrap;
        }
    </pre>
</body>
</html>